<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="70px" style="background-color: #386582">
            <h1 style="color: white;
            font-size: 30px;margin: 0;line-height: 70px">烘焙坊后台管理系统
                <span style="float: right;font-size: 20px">
                    欢迎{{user.nickName}}回来!
                    <a href="javascript:void(0)" @click="logout()" style="color: orange">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="currentIndex"
                         @select="handleSelect" active-text-color="orange">
                    <img src="imgs/icon.png" width="150">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-user">用户管理</i></el-menu-item>
                    <el-menu-item index="2"><i class="el-icon-picture">轮播图</i></el-menu-item>
                    <el-menu-item index="3"><i class="el-icon-s-order">烘焙食谱</i></el-menu-item>
                    <el-menu-item index="4"><i class="el-icon-video-camera">烘焙视频</i></el-menu-item>
                    <el-menu-item index="5"><i class="el-icon-info">行业资讯</i></el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!--用户表格开始-->
                <el-table v-if="currentIndex==1" :data="userArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="userName" label="用户名"></el-table-column>
                    <el-table-column prop="nickName" label="昵称"></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <el-avatar :src="scope.row.imgUrl"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column label="管理员">
                        <template slot-scope="scope">
                            <!--                            @change 值改变事件-->
                            <el-switch :disabled="user.id==scope.row.id" @change="change(scope.row)"
                                       v-model="scope.row.isAdmin"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="user.id==scope.row.id" type="danger"
                                       @click="deleteUser(scope.$index,scope.row)" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--用户表格结束-->
                <!--轮播图表格开始     -----------此处应该添加一个“添加轮播图”功能--------------->
                <el-table v-if="currentIndex==2" :data="bannerArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="200">
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="bannerDelete(scope.$index,scope.row)" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--轮播图表格结束-->
                <!--内容表格开始-->
                <el-table v-if="currentIndex>2" :data="contentArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column label="封面" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="60px">
                        </template>
                    </el-table-column>
                    <el-table-column v-if="currentIndex!=4" prop="brief" label="摘要" width="300px"></el-table-column>
                    <el-table-column prop="categoryName" label="分类" width="80px"></el-table-column>
                    <el-table-column prop="viewCount" label="浏览量" width="50px"></el-table-column>
                    <el-table-column prop="commentCount" label="回复量" width="50px"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" @click="contentEdit(scope.$index,scope.row)" size="mini">编辑
                            </el-button>
                            <el-button type="danger" @click="contentDelete(scope.$index,scope.row)" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--内容表格结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--import axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1",
                userArr: [],
                bannerArr: [],
                contentArr: [],
                user: localStorage.user ? JSON.parse(localStorage.user) : null
            }
        },
        methods: {
            logout() {
                if (confirm("您确定退出登录吗?")) {
                    axios.get("/v1/users/logout").then(function () {
                        localStorage.clear();
                        location.href = "/";
                    })
                }
            },

            change(user) {
                //判断删除的用户是否是当前登录的用户
                if (user.id == v.user.id && !user.isAdmin) {
                    v.$message.error("不能取消自己的管理员状态！");
                    user.isAdmin = true;
                    return;
                }
                //发请求修改用户的管理员状态
                axios.post("/v1/users/" + user.id + "/" + (user.isAdmin ? 1 : 0) + "/change").then(function (response) {
                    if (response.data.code == 1) {
                        if (user.isAdmin) {
                            v.$message.success("设置为管理员!");
                        } else {
                            v.$message.success("取消管理员!");
                        }
                    }
                })
            },

            handleSelect(key, keyPath) {
                location.href = "/admin.html?key=" + key;
            },

            deleteUser(i, user) {
                //判断删除的用户是否是当前登录的用户
                if (v.user.id == user.id) {
                    v.$message.error("无法删除自己的账号！");
                    return;
                }

                if (confirm("您确定要删除" + user.nickName + "吗?")) {
                    //发出删除请求
                    axios.post("/v1/users/" + user.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.userArr.splice(i, 1);
                        }
                    })
                }
            },

            bannerDelete(i, b) {

                if (confirm("您确定要删除此轮播图吗?")) {
                    //发出删除请求
                    axios.post("/v1/banners/" + b.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.bannerArr.splice(i, 1);
                        }
                    })
                }
            },

            contentEdit(i, c) {
                let type = v.currentIndex - 2;
                location.href = "/postArticle.html?type=" + c.type + "&id=" + c.id;
            },

            contentDelete(i, c) {
                if (confirm("您确认删除此文章吗?")) {
                    axios.post("/v1/contents/" + c.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.contentArr.splice(i, 1);
                        }
                    })
                }
            }

        },
        created: function () {
            //请求所有信息
            axios.get("/v1/users/").then(function (response) {
                if (response.data.code == 1) {
                    v.userArr = response.data.data;
                } else {
                    alert("无权访问!");
                    location.href = "/";
                }
            })

            //请求轮播图信息
            axios.get("/v1/banners/admin").then(function (response) {
                if (response.data.code == 1) {
                    v.bannerArr = response.data.data;
                }
            })

            //请求内容表格信息
            if (location.search.includes("key")) {
                let key = new URLSearchParams(location.search).get("key");
                this.currentIndex = key;
                if (key > 2) {
                    let type = key - 2;
                    axios.get("/v1/contents/" + type + "/admin").then(function (response) {
                        if (response.data.code == 1) {
                            v.contentArr = response.data.data;
                        }
                    })
                }
            }
        }
    })
</script>
</html>
